import { useState, useEffect } from 'react';

// 模拟天气数据
interface WeatherData {
  temperature: number;
  condition: string;
  location: string;
  icon: string;
}

export default function WeatherWidget() {
  const [weatherData, setWeatherData] = useState<WeatherData>({
    temperature: 24,
    condition: '晴朗',
    location: '上海',
    icon: 'fa-sun'
  });
  const [showLocationSelector, setShowLocationSelector] = useState(false);
  const [selectedLocation, setSelectedLocation] = useState<string>("上海");
  
  // 常用城市列表
  const locations = ["北京", "上海", "广州", "深圳", "杭州", "成都", "南京", "武汉", "重庆", "西安"];
  
  // 从localStorage加载保存的地区偏好
  useEffect(() => {
    const savedLocation = localStorage.getItem('weatherLocation');
    if (savedLocation) {
      setSelectedLocation(savedLocation);
      setWeatherData(prev => ({ ...prev, location: savedLocation }));
    }
  }, []);
  
  // 模拟天气数据更新
  useEffect(() => {
    const updateWeather = () => {
      // 根据不同地区生成略有差异的温度
      const baseTemp = locations.indexOf(selectedLocation) * 2;
      const newTemp = Math.floor(Math.random() * 8) + 18 + baseTemp;
      
      // 随机天气状况
      const conditions = [
        { icon: 'fa-sun', condition: '晴朗' },
        { icon: 'fa-cloud', condition: '多云' },
        { icon: 'fa-cloud-sun', condition: '晴间多云' },
        { icon: 'fa-cloud-rain', condition: '小雨' }
      ];
      const randomCondition = conditions[Math.floor(Math.random() * conditions.length)];
      
      setWeatherData({
        ...weatherData,
        temperature: newTemp,
        icon: randomCondition.icon,
        condition: randomCondition.condition,
        location: selectedLocation
      });
    };
    
    // 每10分钟更新一次天气数据
    const weatherInterval = setInterval(updateWeather, 600000);
    // 初始加载时立即更新一次
    updateWeather();
    
    return () => clearInterval(weatherInterval);
  }, [selectedLocation]);
  
  // 处理地区选择
  const handleLocationSelect = (location: string) => {
    setSelectedLocation(location);
    setWeatherData(prev => ({ ...prev, location }));
    localStorage.setItem('weatherLocation', location);
    setShowLocationSelector(false);
  };
  
  // 根据天气状况设置图标颜色
  const getIconColor = () => {
    if (weatherData.icon.includes('sun')) return 'text-yellow-500';
    if (weatherData.icon.includes('rain')) return 'text-blue-400';
    return 'text-gray-400';
  };
  
  return (
     <div className="absolute top-4 right-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm p-3 flex items-center space-x-3 border border-gray-100 dark:border-gray-700 transition-all duration-300 hover:shadow-md z-10">
       <i className={`fa-solid ${weatherData.icon} ${getIconColor()} text-xl`}></i>
       <div className="relative">
         <div className="text-gray-900 dark:text-gray-100 font-medium">{weatherData.temperature}°C</div>
         <div 
           className="text-xs text-gray-500 dark:text-gray-400 flex items-center cursor-pointer hover:text-blue-500 dark:hover:text-blue-400"
           onClick={() => setShowLocationSelector(!showLocationSelector)}
         >
           {weatherData.condition} · {weatherData.location}
           <i className={`fa-solid fa-chevron-down ml-1 text-[10px] transition-transform duration-200 ${showLocationSelector ? 'rotate-180' : ''}`}></i>
           
           {/* 地区选择下拉面板 */}
           {showLocationSelector && (
             <div className="absolute top-full right-0 mt-1 w-40 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden z-20 animate-in fade-in-50 zoom-in-95 duration-150">
               {locations.map(location => (
                 <div 
                   key={location}
                   className={`px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer flex items-center justify-between ${selectedLocation === location ? 'text-blue-500 dark:text-blue-400 font-medium' : 'text-gray-700 dark:text-gray-300'}`}
                   onClick={() => handleLocationSelect(location)}
                 >
                   {location}
                   {selectedLocation === location && <i className="fa-solid fa-check text-xs"></i>}
                 </div>
               ))}
             </div>
           )}
         </div>
       </div>
     </div>
   );
 }